<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    .box{
        width:100px;
        height: 100px;
        background: red;
        border: 10px solid green;
        padding: 30px;
         /* 变成怪异盒模型  width包含了padding+border */
        box-sizing: border-box;
    }
</style>
<body>
    <div class="box"></div>
    <ul>
        <!-- <li>1</li>
        <li>2</li>
        <li>3</li> -->
    </ul>
    <button>点击添加li</button>
</body>
<script>
    function Star(name){
        this.name = name
        this.sing =function(){
            console.log('我会唱歌');
        }

    }
  let ldh = new Star('刘德华')
  Star.prototype.dance = function(){
    console.log('我会跳舞');
  }
  Star.prototype.hubby = '唱歌yyds'
 
ldh.sing()
console.log(ldh.__proto__);
console.log(Star.prototype);
Star.prototype.dance()
console.log(Star.prototype.hubby);

console.log(Star.prototype.constructor === Star);
ldh.__proto__.dance()
console.log(ldh.__proto__.hubby);



let num = 1
console.log(num.constructor == Number);

let lis = document.querySelectorAll('ul li')
let ul = document.querySelector('ul')
// for(var i=0;i<lis.length;i++){
//     lis[i].onclick =function(){
//         this.style.background ='red'
//     }
// }
// ul.onclick = function(e){
//     console.log(e.target);
//     e.target.style.background = 'red'

// }
// // 事件委托又叫做事件代理 ，把所有子元素的事件绑定到父元素上 事件对象e.target获取到目标元素，从而实现我们的操作  可以节省性能的消耗


let btn = document.querySelector('button')
btn.onclick = function(){
    let li = document.createElement('li')
    li.innerHTML = '我是新增的li节点'
    ul.appendChild(li)
}
// 获取li节点添加循环，给未来元素添加不了事件
// for(var i=0;i<lis.length;i++){
//     lis[i].onclick =function(){
//         this.style.background ='red'
//     }
// }

ul.onclick = function(e){
    console.log(e.target);
    e.target.style.background = 'red'

}
// 事件委托可以把未来节点事件绑定在父节点上


// 事件委托的原理就是时间冒泡 从内到外会把时间冒到父元素上

// // 第一；事件委托又叫做事件代理 ，把所有子元素的事件绑定到父元素上 事件对象e.target获取到目标元素，从而实现我们的操作  可以节省性能的消耗
// 第二：事件委托可以把未来节点事件绑定在父节点上


// 标准和模型  一个盒子的宽度 width+padding（左右）+margin（左右）+border（左右）
// 怪异盒模型（iE盒模型）  一个盒子的宽度  width+margin（左右） （width包含了padding+border）
// 标准盒模型（box-sizing:content-box）  怪异的（box-sizing:border-box）







</script>
</html>